<!--
 * @Author: zqg
 * @Date: 2021-03-02 10:52:41
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-15 17:35:26
 * @Description: 员工考勤详情内容
-->
<template>
  <div>
    <el-button
      v-for="item in types['考勤分类']"
      :key="item.index"
      :class="item.type === currentType ? 'active-btn' : ''"
      @click="chooseType(item)"
    >{{ item.text }}</el-button>
    <data-table
      :is-show-serial-num="false"
      :value="tablePageList"
      :total-count="listAll.length"
      :has-action="false"
      :table-column-attributes="tableColumnAttributes"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :width="160"
    >
      <template #allNum>
        <slot name="allNum"> </slot>
      </template>
    </data-table>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import BaseLayout from '@/views/layout/Base'
import { getAttendanceList } from '@/api/after-sale/personnel/attendance'
import { getDict } from '@/utils/index'
import { getAttendanceTableColumn } from '@/utils/attendance'
export default {
  components: {
    BaseLayout
  },
  mixins: [
    baseMixin({})
  ],
  props: {
    userId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      searchOptions: {
        userId: '',
        type: getDict(['考勤分类'])['考勤分类'][0].value
      },
      // 当前选择的考勤类型
      currentType: getDict(['考勤分类'])['考勤分类'][0].type,
      // 考勤类型列表
      types: getDict(['考勤分类']),
      pageSize: 3,
      pageSizes: [3],
      // 当前考勤类型下的所有考勤
      listAll: [],
    }
  },
  computed: {
    // 表格配置
    tableColumnAttributes() {
      return getAttendanceTableColumn(this.currentType)
    },
    /**
     * @description: 当前类型分页规则列表
     * @param {*}
     * @return {*}
     */
    tablePageList() {
      return this.listAll.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  created() {
    this.searchOptions.userId = this.userId
    this.getList()
  },
  methods: {
    /**
     * @description: 选择考勤类型
     * @param {Object} type
     * @return {*}
     */
    chooseType(info) {
      if (this.currentType !== info.type) {
        this.searchOptions.type = info.value
        this.currentType = info.type
        this.currentPage = 1
        this.listAll = []
        this.setTableData()
        this.getList()
      }
    },
    /**
     * @description: 获取考勤列表
     * @param {*}
     * @return {*}
     */
    getList() {
      getAttendanceList(this.searchOptions).then((res) => {
        this.listAll = res.data || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
}
.active-btn {
  background-color: #00a1ec;
  color: #ffffff;
}
</style>
